import isEqual from "lodash/isEqual";
import { useLayoutEffect, useRef } from "react";

const depsEqual = (aDeps, bDeps = []) => {
  return isEqual(aDeps, bDeps);
};
//useLayoutEffect deep compare实现
const useDeepCompareLayoutEffect = (effect, deps) => {
  const ref = useRef();
  const signalRef = useRef(0);

  if (!depsEqual(deps, ref.current)) {
    ref.current = deps;
    signalRef.current += 1;
  }

  useLayoutEffect(effect, [signalRef.current]);
};

export default useDeepCompareLayoutEffect;
